<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>媒体查询</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        ul,li {
            list-style: none;
        }

        .container {
            position: fixed;
        }

        .container li {
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 14px;
            text-align: center;
            color: #fff;
        }

        .container ul li:first-child {
            background: green;
        }

        .container ul li:nth-child(2) {
            background: red;
        }

        .container ul li:nth-child(3) {
            background: #096;
        }

        .container ul li:nth-child(4) {
            background: #f40;
        }

        .container ul li:last-child {
            background: green;
        }

       @media only screen and (min-width:1000px) {
           .container {
               top: 100px;
               left: 0;
           }
       } 

       @media (max-width:1000px) {

            .container {
                width: 100%;
                bottom: 0;
                left: 0;
            }

            .container ul {
                width: 100%;
                overflow: hidden;
            }

           .container ul li {
               width: 20%;
               float: left;
           }


       } 
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>分享</li>
            <li>收藏</li>
            <li>点赞</li>
            <li>喜欢</li>
            <li>更多</li>
        </ul>
    </div>
</body>
</html>